<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>



    <script>
        let data = {shuzi:0 }
        let active 
        // active = ()=>{
        //     app.innerHTML = data.shuzi 
        // }

        function xiangyingshi(data) {
            console.log('开始核心逻辑了')
            for(let key in data) {
                let value = data[key]
                // 第一次value = 0 
                // value ='2108'
                let dep = [] 
                // [active]
                Object.defineProperty(data,key,{
                    get() {
                        console.log('get 读数据的时候劫持')
                        if(active) {
                            dep.push(active)
                        }
                        return value 
                    },
                    set(newvalue) {
                        console.log('set 设置数据的时候劫持') 
                        value = newvalue 
                        dep.forEach(item=>item())
                    }
                })
            }
        }



        xiangyingshi(data)

        const watcher = (fn)=>{
            active = fn 
            fn()
            active =null 
        }

        watcher(()=>{
            app.innerHTML = data.shuzi 
        })
        
    </script>
</body>
</html>